<template>
  <div>
    <el-card class="box-card" style="margin: 10px 15px 20px 10px;">
      <div slot="header" class="clearfix">
        <span class="blue">合同审核</span>
      </div>
      <div class="text item">
        <el-table
          :data="dataList" border
          style="width: 100%"
          ref="htshTable"
        @expand-change="handleExpandChange">
          <el-table-column type="expand">
            <template slot-scope="slotScope">
              <el-table
                v-if="slotScope.row.subTableData.length>0"
                ref="subTable"
                :key="slotScope.row.id"
                style="width: 100%;margin-top:20px"
                :data="slotScope.row.subTableData"
                border>
                <el-table-column type="index" width="80" header-align="center" align="center" label="序号"></el-table-column>
                <el-table-column
                  prop="contractName"
                  header-align="center"
                  align="center"
                  width="160"
                  label="合同名称">
                </el-table-column>
                <el-table-column
                  prop="htMs"
                  header-align="center"
                  align="center"
                  label="受约人姓名">
                </el-table-column>
                <el-table-column
                  prop="htZq"
                  header-align="center"
                  align="center"
                  label="节点">
                </el-table-column>
                <el-table-column
                  prop="htZqsq"
                  header-align="center"
                  align="center"
                  show-overflow-tooltip
                  label="接收时间">
                </el-table-column>
              </el-table>
            </template>
          </el-table-column>
          <el-table-column type="index" width="80" header-align="center" align="center" label="序号"></el-table-column>
          <el-table-column
            prop="contractName"
            header-align="center"
            align="center"
            width="160"
            label="合同名称">
          </el-table-column>
          <el-table-column
            prop="htMs"
            header-align="center"
            align="center"
            label="受约人姓名">
          </el-table-column>
          <el-table-column
            prop="htZq"
            header-align="center"
            align="center"
            label="节点">
          </el-table-column>
          <el-table-column
            prop="htZqsq"
            header-align="center"
            align="center"
            show-overflow-tooltip
            label="接收时间">
          </el-table-column>
        </el-table>
      </div>
    </el-card>
    <el-card class="box-card" style="margin: 10px 15px 20px 10px;" v-if="false">
      <div slot="header" class="clearfix">
        <span class="blue">奖金概况</span>
      </div>
      <div class="text item">
        <el-row>
          <el-col :span="12">
            <div id="totalFf1" style="width:99%;height:400px;"></div>
          </el-col>
          <el-col :span="12">
            <div id="totalFf2" style="width:99%;height:400px;"></div>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script>
import {
  workForlwFf
} from '@/api/jiangjin/jiangjinfpjjfpdjb'
import { page as htshPage } from '@/api/hetongrenwu/hetongyeji/hetongnd.js'
import { getList} from '@/api/hetongrenwu/hetongyeji/hetongzb'
import * as echarts from "echarts";
import FileSaver from 'file-saver'
import XLSX from "xlsx";

export default {
  components: {},

  data() {
    return {
      dataForm: {},
      jiangjinFpJjfpdjb: {},
      jjxXq: [],
      jjxTjXq: [],
      jjxJeXq: {},
      dwQb: [],
      grQb: [],
      zjQb: [],
      jcList: [],
      dataList:[],
      dataList2:[],
      dx: false
    }
  },
  created: function () {

  },
  methods: {
    init(formInfo,
         formInfoDetailed,
         formData,
         GUID,
         wfYwMain,
         wfYwStream,
         dqYwStream,
         dqTask) {
      this.loadData(wfYwMain.ywLyid)
    },
    exportExcelXq(name,ref) {
      const excelName = name;
      try {
        const $e = this.$refs[ref].$el
        let $table = $e.querySelector('.el-table__fixed')
        if (!$table) {
          $table = $e
        }
        const wb = XLSX.utils.table_to_book($table, {
          raw: true
        })

        const wbout = XLSX.write(wb, {
          bookType: 'xlsx',
          bookSST: true,
          type: 'array'
        })
        FileSaver.saveAs(
          new Blob([wbout], {
            type: 'application/octet-stream'
          }),
          `${excelName}.xlsx`,
        )
      } catch (e) {
        if (typeof console !== 'undefined') console.error(e)
      }
    },
    /**
     * 加载数据
     */
    loadData(id) {
      htshPage({current: 1,
        size: 20}).then(res=>{
        this.dataList = res.data.data.records;
      })
      return;
      workForlwFf(id).then(response => {
        this.dataForm = response.data.data;
        this.jiangjinFpJjfpdjb = response.data.data.jiangjinFpJjfpdjb;
        if (this.jiangjinFpJjfpdjb && this.jiangjinFpJjfpdjb.jjxJeXq) {
          this.jjxJeXq = JSON.parse(this.jiangjinFpJjfpdjb.jjxJeXq)
        }
        if (this.jiangjinFpJjfpdjb && this.jiangjinFpJjfpdjb.jjxXq) {
          this.jjxXq = JSON.parse(this.jiangjinFpJjfpdjb.jjxXq)
        }
        if (this.jiangjinFpJjfpdjb && this.jiangjinFpJjfpdjb.jjxTjXq) {
          this.jjxTjXq = JSON.parse(this.jiangjinFpJjfpdjb.jjxTjXq)
        }
        this.dwQb = response.data.data.dwQb;
        this.grQb = response.data.data.grQb;
        this.zjQb = response.data.data.zjQb;
        this.jcList = response.data.data.jcList;
        for (var i in this.grQb) {
          if (this.grQb[i].jjJeDxId > 0) {
            this.dx = true;
            break;
          }
        }
        this.$nextTick(() => {
          this.$nextTick(() => {
            setTimeout(() => {
              this.echarts1(this.dwQb);
              this.echarts2(this.zjQb);
            }, 100)
          })
        })
      });
    },
    //打开行扩展获取子表得数据
    handleExpandChange(expandedRows){
      getList(expandedRows.id).then(res=>{
       //console.log(JSON.stringify(res))
        this.dataList2= res.data.data;
      })
    },
    //获取子表得数据
    getSubTableData(id){
      getList(id).then(res=>{
       //this.dataList2= res.data.data;
      })
    },
    getGwQb(r) {
      let data = [];
      for (var i in this.grQb) {
        if (this.grQb[i].rySjdwCode == r.rySjdwCode) {
          data.push(this.grQb[i]);
        }
      }
      return data;
    },
    getSm(r) {
      let data = [];
      for (var i in this.jcList) {
        if (this.jcList[i].userCode == r.ryCode) {
          data.push(this.jcList[i].jjSm + "（" + this.jcList[i].lx + this.jcList[i].jjJe + "）");
        }
      }
      return data.join();
    },
    echarts1(total) {
      var colors = ["#da4996", "#6cb7b3", "#f1c51e", "#d2c72d", "#7a8c62", "#cdafb1", "#8bc561", "#c45c81", "#6882bf", "#4f5a89"];
      var vo = [{
        value: 0,
        name: "暂无数据",
      }];
      if (total.length > 0) {
        vo = [];
      }
      for (var i = 0; i < total.length; i++) {
        vo.push({
          value: total[i].jjJe,
          name: total[i].rySjdw,
        });
      }
      var chartDom = document.getElementById('totalFf1');
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        title: {
          text: '单位汇总',
          x: 'left',
          y: 'top',
        },
        tooltip: {
          trigger: 'item'
        },
        series: [{
          name: '单位汇总',
          type: 'pie',
          radius: ['40%', '75%'],
          avoidLabelOverlap: false,
          itemStyle: {
            normal: {
              borderRadius: 10,
              borderWidth: 2,
              color: function (params) {
                return colors[params.dataIndex%10];
              }
            },
          },
          data: vo,
          label: { //去除饼图的指示折线label
            normal: {
              show: false,
              position: 'inside',
              formatter: "{b}:{d}%"
            },
          },
        }]
      };
      option && myChart.setOption(option);

    },
    echarts2(total) {
      var colors = ["#cddb79", "#ba81b6", "#e47a48", "#e94f4d", "#954395", "#cae3bb", "#e95297", "#d8bf8d", "#2d5caa", "#689797"];
      var vo = [{
        value: 0,
        name: "暂无数据",
      }];
      if (total.length > 0) {
        vo = [];
      }
      for (var i = 0; i < total.length; i++) {
        vo.push({
          value: total[i].jjJe,
          name: total[i].ryZwjb,
        });
      }
      var chartDom = document.getElementById('totalFf2');
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        title: {
          text: '职级汇总',
          x: 'left',
          y: 'top',
        },
        tooltip: {
          trigger: 'item'
        },
        series: [{
          name: '职级汇总',
          type: 'pie',
          radius: ['40%', '75%'],
          avoidLabelOverlap: false,
          itemStyle: {
            normal: {
              borderRadius: 10,
              borderWidth: 2,
              color: function (params) {
                return colors[params.dataIndex%10];
              }
            },
          },
          data: vo,
          label: { //去除饼图的指示折线label
            normal: {
              show: false,
              position: 'inside',
              formatter: "{b}:{d}%"
            },
          },
        }]
      };
      option && myChart.setOption(option);

    },
    getFormData() {
      var valid = true;
      if (valid) {
        this.$emit("returnFormData", null);
      }
    }
  }
}

</script>

<style>
.el-table__expanded-cell{
  padding:10px 0 10px 50px !important;
}
</style>
